<template>

  <div class="main_bottom">
    <div class="main_left">
      <div class="menu_item" id="equipmentManagement.equipmentOperationStatus" :style="{background:selectMenu===1?'#F0F3F8':'#fff',color:selectMenu===1?'#116DEE':'#2A2A2A'}" @click="checkMenu(1)">设备运行状况</div>
      <div class="menu_item" id="equipmentManagement.equipmentLog" :style="{background:selectMenu===2?'#F0F3F8':'#fff',color:selectMenu===2?'#116DEE':'#2A2A2A'}" @click="checkMenu(2)">设备日志</div>
      <!-- <div class="menu_item" equipmentMaintenance:style="{background:selectMenu===3?'#F0F3F8':'#fff',color:selectMenu===3?'#116DEE':'#2A2A2A'}" @click="checkMenu(3)">设备维护</div> -->
      <div class="menu_item" id="equipmentManagement.inspectionRecord" :style="{background:selectMenu===4?'#F0F3F8':'#fff',color:selectMenu===4?'#116DEE':'#2A2A2A'}" @click="checkMenu(4)">点检记录</div>
      <div class="menu_item" id="equipmentManagement.inspectionContent" :style="{background:selectMenu===5?'#F0F3F8':'#fff',color:selectMenu===5?'#116DEE':'#2A2A2A'}" @click="checkMenu(5)">点检内容</div>
      <div class="menu_item" id="equipmentManagement.componentLifeStatistics" :style="{background:selectMenu===6?'#F0F3F8':'#fff',color:selectMenu===6?'#116DEE':'#2A2A2A'}" @click="checkMenu(6)">元件寿命统计</div>
      <div class="menu_item" id="equipmentManagement.maintenancePlan" :style="{background:selectMenu===7?'#F0F3F8':'#fff',color:selectMenu===7?'#116DEE':'#2A2A2A'}" @click="checkMenu(7)">保养计划</div>
      <div class="menu_item" id="equipmentManagement.equipmentInformation" :style="{background:selectMenu===8?'#F0F3F8':'#fff',color:selectMenu===8?'#116DEE':'#2A2A2A'}" @click="checkMenu(8)">设备信息</div>
    </div>
    <div class="main_right" v-if="selectMenu===1" style="background-color: #F0F3F8">
      <div class="main_content">
        <div class="top_center_title">运行时间占比</div>
        <el-row>
          <el-col :span="16">
            <div id="echarts_machine" style="height: 340px;width: 600px;margin-left: 20px;padding-top: 20px;box-sizing: border-box;"></div>
          </el-col>
          <el-col :span="8" style="position: absolute;right:10px;top:-56px">
            <div style="width: 500px;height: 100%;display: flex;justify-content: center;align-items: center;margin-top: 20px;">
              <!-- <img src="../../../src/assets/camera_status.png" style="width: 450px;height: 300px;"/> -->
              <el-table :data="cameraData" style="width: 450px;" > <!-- height: 300px; max-height="366px"-->
                <el-table-column :prop="head.prop" label="主机1" v-for="head in hostData" :key="head">
                  <template slot="header" slot-scope="scope">
                    <div>

                        <span style="font-size: 26px;position: relative;top:4px;color: #43B986"
                              v-show="head.status==1">
                          <i class="el-icon-s-platform"></i></span>
                      <span style="font-size: 26px;position: relative;top:4px;color: #F23541"
                            v-show="head.status==0">
                            <i class="el-icon-s-platform"></i></span>
                      <span>{{head.hostname}}</span>
                    </div>
                  </template>
                  <template slot-scope="scope">
                    <div>

                        <span style="font-size: 26px;position: relative;top:4px;color: #43B986"
                              v-show="head.prop in scope.row && scope.row[head.prop].split(':')[1]==1">
                          <i class="el-icon-camera-solid"></i></span>
                      <span style="font-size: 26px;position: relative;top:4px;color: #F23541"
                            v-show="head.prop in scope.row &&scope.row[head.prop].split(':')[1]==0">
                          <i class="el-icon-camera-solid"></i></span>
                      <span v-if="head.prop in scope.row">{{scope.row[head.prop].split(':')[0] }}</span>
                    </div>
                  </template>
                </el-table-column>

                <!-- <el-table-column prop="host2" label="主机2">
                  <template slot-scope="scope">
                      <div>
                        <span>{{scope.row.host1.split(':')[0] }}</span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #43B986" v-show="scope.row.host1.split(':')[1]==1">
                          <i class="el-icon-camera-solid"></i></span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #F23541" v-show="scope.row.host1.split(':')[1]==0">
                          <i class="el-icon-camera-solid"></i></span>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="host3" label="主机3">
                  <template slot-scope="scope">
                      <div>
                        <span>{{scope.row.host1.split(':')[0] }}</span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #43B986" v-show="scope.row.host1.split(':')[1]==1">
                          <i class="el-icon-camera-solid"></i></span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #F23541" v-show="scope.row.host1.split(':')[1]==0">
                          <i class="el-icon-camera-solid"></i></span>
                      </div>
                    </template>
                </el-table-column>
                <el-table-column prop="host4" label="主机4">
                  <template slot-scope="scope">
                      <div>
                        <span>{{scope.row.host1.split(':')[0] }}</span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #43B986" v-show="scope.row.host1.split(':')[1]==1">
                          <i class="el-icon-camera-solid"></i></span>
                        <span style="font-size: 26px;position: relative;top:4px;color: #F23541" v-show="scope.row.host1.split(':')[1]==0">
                          <i class="el-icon-camera-solid"></i></span>
                      </div>
                    </template>
                </el-table-column> -->
              </el-table>
            </div>
          </el-col>
        </el-row>


      </div>
      <div class="main_content" style="margin: 5px 0 0 0;">
        <div class="top_center_title">设备状态</div>
        <div class="machine_table">

          <div class="table_item" style="flex: 2;margin: 15px 5px 0px 20px;">
            <div class="table_header">{{ tableData[0].title }}</div>
            <div class="table_title">
              <div class="title_list"></div>
              <div class="title_list" v-for="item in tableData[0].data.header" style="text-indent: 30px;">{{ item }}</div>
            </div>
            <div class="table_content">
              <div class="content_item" style="flex:1">
                <div class="item_title" v-for="its in tableData[0].data.data">{{ its.label }}</div>
              </div>
              <div class="content_main" :style="{flex:tableData[0].data.header.length}">
                <div class="main_list" v-for="it in tableData[0].data.data">
                  <div class="list_item" v-for="(itu,index) in it.data" style="flex: 1;">
                    <div class="list_bg" :style="{background:itu===1?'#43B986':itu===0?'#FAC600':'#F23541'}"></div>
                    <div class="list_img" v-if="index!==it.data.length-1"><img src="../../assets/形状.png"></div>
                  </div>

                </div>
              </div>
            </div>

          </div>
          <div class="table_item" style="flex: 1;margin: 15px 20px 0px 5px;">
            <div class="table_header">{{ tableData[1].title }}</div>
            <div class="table_title">
              <div class="title_list"></div>
              <div class="title_list" v-for="item in tableData[1].data.header" style="text-indent: 20px;">{{ item }}</div>
            </div>
            <div class="table_content">
              <div class="content_item" style="flex:1">
                <div class="item_title" v-for="its in tableData[1].data.data">{{ its.label }}</div>
              </div>
              <div class="content_main" :style="{flex:tableData[1].data.header.length}">
                <div class="main_list" v-for="it in tableData[1].data.data">
                  <div class="list_item" v-for="(itu,index) in it.data" style="flex: 1;">
                    <div class="list_bg" :style="{background:itu===1?'#43B986':itu===0?'#FAC600':'#F23541'}"></div>
                    <div class="list_img" v-if="index!==it.data.length-1"><img src="../../assets/形状.png"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main_right" v-if="selectMenu===2">
      <DeviceLogTab></DeviceLogTab>
    </div>
    <div class="main_right" v-if="selectMenu===4">
      <PointInspection></PointInspection>
    </div>
    <div class="main_right" v-if="selectMenu===5">
      <PointInspectionContent></PointInspectionContent>
    </div>
    <div class="main_right" v-if="selectMenu===6">
      <Lifespan></Lifespan>
    </div>
    <div class="main_right" v-if="selectMenu===7">
      <Maintenance></Maintenance>
    </div>
    <div class="main_right" v-if="selectMenu===8">
      <div class="main_content" style="width: 95%; padding: 30px !important">
        <div class="main_title" >设备信息</div>
        <div class="main_text" style="padding-top: 20px;">外观模型: {{ machineInfo.model }}</div>
        <div class="main_text">机台编号: {{ machineInfo.number }}</div>
        <div class="main_text">算法版本: {{ machineInfo.series }}</div>
        <div class="main_text">UI版本: {{ machineInfo.uiversion }}</div>
        <!-- <div class="main_text">© 2024   XX公司 保留所有权利</div> -->
      </div>
    </div>
  </div>

</template>

<script>
import qwebchannel from '../../qt5.15webchannel.js';
import * as echarts from 'echarts';
import DeviceLogTab from './DeviceLogTab.vue';
import PointInspection from './PointInspection.vue'
import Maintenance from './Maintenance.vue';
import Lifespan from './Lifespan.vue';
import { validPermision } from '../../utils/tools.js';
import PointInspectionContent from './PointInspectionContent.vue';
export default {
  components: {
    DeviceLogTab,PointInspection,Maintenance,Lifespan,PointInspectionContent
  },
  name: 'BoneDen',
  data() {
    return {
      hostData:[{hostname:'模块1',status:1,prop:'host1'},{hostname:'模块2',status:1,prop:'host2'},{hostname:'模块3',status:1,prop:'host3'},{hostname:'模块4',status:1,prop:'host4'}],//0=ng,1=ok
      cameraData:[
        {"host1": "CCD31:1","host2": "CCD33:1","host3": "CCD51:1","host4": "CCD61:1"}
        ,{"host1": "CCD32:1","host2": "CCD41:1","host3": "CCD52:1","host4": "CCD62:1"}
        ,{"host1": "","host2": "CCD11:1",      "host3": "CCD53:1","host4": "CCD63:1"}
        ,{"host1": "","host2": "CCD22:1",      "host3": "CCD54:1","host4": "CCD64:1"}
        ,{"host1": "","host2": "",             "host3": "CCD55:1","host4": "CCD65:1"}
        ,{"host1": "","host2": "",             "host3": "CCD56:1","host4": "CCD66:1"}
      ],
      selectMenu: 1,
      option: null,
      qtCall:null,
      machineInfo: {
        uiversion:'1.0',
        model: 0,
        number: 0,
        series:0
      },
      runningTimeProportion: [
        {
          label: "运行",

          value: 30
        },
        {
          label: "待料",

          value: 40
        },
        {
          label: "报警",

          value: 30
        }
      ],
      myChart: null,

      tableData:[{
        data: {
          data: [
            //   {
            //   data: [1, 1, 1, 2, 1, 1, 1, 1],
            //   label: "穴位1"
            // }, {
            //   data: [0, 1, 0, 2, 0, 0, 1, 0],
            //   label: "穴位2"
            // }
          ],
          // header: ["入料定位", "S2搬运", "S2检测", "S3搬运", "S3检测", "S4搬运", "下料输送", "下料搬运"],
          header: []
        },
        title: "AOI 1"
      },
        {
          data: {
            data: [
              // {
              // data: [0, 1, 2, 1],
              // label: "穴位1"
              // }, {
              //   data: [0, 1, 2, 1],
              //   label: "穴位2"
              // }, {
              //   data: [0, 1, 2, 1],
              //   label: "穴位3"
              // }, {
              //   data: [0, 1, 2, 1],
              //   label: "穴位4"
              // }, {
              //   data: [0, 1, 2, 1],
              //   label: "穴位5"
              // }, {
              //   data: [0, 1, 2, 1],
              //   label: "穴位6"
              // }
            ],
            // header: ["入料翻转", "用户面", "系统面", "下料翻转"],
            header: []
          },
          title: "AOI 2"
        }
      ],
      //1运行，0待料，2报警
      // tableData1: [
      //         {
      //           title: '穴位1',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //         },
      //         {
      //           title: '穴位2',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //         },
      //         {
      //           title: '穴位3',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //   },
      //   {
      //           title: '穴位4',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //   },
      //   {
      //           title: '穴位5',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //   },
      //   {
      //           title: '穴位6',
      //           time1: 1,
      //           time2: 2,
      //           time3: 2,
      //           time4: 2,
      //           time5: 2,
      //           time6:2
      //         },
      //       ]

    }
  },
  created() {

  },
  mounted() {
    // setInterval(() => {
    //       try {
    //         console.log('heart-test','heart')
    //         this.qtCall.JsToQt("HeartTest", {})//NeedRefreshRealData
    //       } catch (error) {
    //         console.log('HeartTest',error)
    //       }
    //     }, 5000);
    const packageData = require('../../../info.json')
    this.machineInfo.uiversion = packageData.version
    if(process.env.NODE_ENV!='production'){
      setTimeout(() => {
        console.log('改变状态')
        this.hostData=
          [{hostname:'模块1',status:1,prop:'host1'},{hostname:'模块2',status:1,prop:'host2'},
            {hostname:'模块3',status:0,prop:'host3'},{hostname:'模块4',status:1,prop:'host4'}]
      }, 2000);
      this.tableData[0].data.data=[
              {
              data: [1, 1, 1, 2, 1, 1, 1, 1],
              label: "穴位1"
            }, {
              data: [0, 1, 0, 2, 0, 0, 1, 0],
              label: "穴位2"
            }
          ]
    }

    if (process.env.NODE_ENV === 'production') {

      // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
        // this.qtCall = channel.objects.webBridge;
        this.qtCall = this.$qtCall
        this.qtCall.QtToJs.connect((func,json) => {
          if(func=="RefreshRunningTimeProportion"){

            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log('打印接口返回RefreshRunningTimeProportion',  datas.data)
              this.runningTimeProportion = datas.data.runningTimeProportion
              this.init()
            }
          }
          if(func=="RefreshDeviceInfo"){
            const datas = JSON.parse(json)

            if (datas.code === 200) {
              this.machineInfo.model = datas.data.deviceInfo[0].value
              this.machineInfo.number = datas.data.deviceInfo[1].value
              this.machineInfo.series = datas.data.deviceInfo[2].value
            }
          }
          if(func=="RefreshDeviceState"){
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              this.tableData = JSON.parse(datas.data.deviceState)
            }
          }
          if(func=="RefreshCameraStatus"){
            const datas = JSON.parse(json)
            if (datas.code === 200) {
              console.log('相机状态返回1:', datas.data)
              this.hostData = datas.data['hostData']
              this.cameraData = datas.data['cameraData']
            }
          }
        })
        console.log('调用接口', 'RefreshCameraStatus')
        this.qtCall.JsToQt("RefreshCameraStatus", {});
      // });

      validPermision(this.selectMenu)
    }else{
      this.init()
      window.addEventListener('resize', this.handleResize);
    }

  },

  beforeDestroy(){
    // this.qtCall = null
    this.disposeChart();
    window.removeEventListener('resize', this.handleResize);
  },
  watch: {
    selectMenu(val) {
      if (val === 1) {
        this.$nextTick(() => {

          if (process.env.NODE_ENV === 'production') {
            this.qtCall.QtToJs.connect((func,json) => {
              if(func=="RefreshRunningTimeProportion"){
                const datas = JSON.parse(json)
                if (datas.code === 200) {
                  console.log('打印接口返回RefreshRunningTimeProportion',  datas.data)
                  this.runningTimeProportion = datas.data.runningTimeProportion
                  this.init()
                }
              }
            })

          }

        });

      } else {
        this.option = null
        if (process.env.NODE_ENV === 'production') {

          this.qtCall.QtToJs.connect((func,json) => {
            if(func=="RefreshDeviceInfo"){
              const datas = JSON.parse(json)
              if (datas.code === 200) {
                this.machineInfo.model = datas.data.deviceInfo[0].value
                this.machineInfo.number = datas.data.deviceInfo[1].value
                this.machineInfo.series = datas.data.deviceInfo[2].value
              }
            }
          })
        }

      }
    }
  },
  methods: {
    checkMenu(index){
      this.selectMenu = index
      if (index === 1){
        this.disposeChart();
        // 重新初始化图表
        this.$nextTick(() => {
          this.init()
        });
      }
    },

    init() {
      const chartDom = document.getElementById('echarts_machine');
      if (!chartDom) return;
      if(!this.myChart){
        this.myChart = echarts.init(chartDom);
      }
      this.myChart.resize();
      const dataList = []

      for (var i = 0; i < this.runningTimeProportion.length; i++){
        const data = {
          name: '',
          value:0
        }
        data.name = this.runningTimeProportion[i].label
        data.value = parseFloat(this.runningTimeProportion[i].value)
        data.itemStyle = {
          color:this.runningTimeProportion[i].label === '运行'?'#43B986':(this.runningTimeProportion[i].label === '待料'||this.runningTimeProportion[i].label === '待产')?'#FAC600':'#F23541'
        }
        dataList.push(data)
      }
      this.option = {
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            return ((params.value)).toFixed(2) + '%';
          },
        },
        grid: {
          left: '0%', //默认10%
          right: '0%', //默认10%
          bottom: '0%', //默认60
          containLabel: true
          //grid区域是否包含坐标轴的刻度标签
        },
        legend: {
          orient: 'horizontal',
          right:0,

          top: 80,
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '80%',
            center: ['35%', '50%'],
            data: dataList,
            // itemStyle: {
            //         color: function (params) {
            //             // params是一个包含数据信息的对象，这里可以通过数据索引返回不同的颜色
            //             var colorList = ['#43B986','#68B9FF','#FAC600' ];
            //             return colorList[params.dataIndex];
            //         }
            //     },
            label: {
              show: true,
              position: 'inside',
              formatter: '{d}%', // 显示百分比
              // formatter: '{c}', // 显示具体数值
              fontSize: 12,
              color: '#fff'
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      this.myChart.setOption(this.option);
      this.myChart.resize();
    },
    disposeChart() {
      if (this.myChart) {
        this.myChart.dispose();
        this.myChart = null;
      }
    },
    handleResize() {
      if (this.myChart) {
        this.myChart.resize();
      }
    },
  },

}
</script>
<style scoped lang="less">
.result{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .result_div{
    width: 60px;
    text-align: center;
    height: 22px;
    line-height: 22px;
    color: #2A2A2A;
    padding-left: 0px;
    border-radius: 10px;
    margin-left: 20px;
  }
  .item_img{
    width: 11px;
    height: 6px;
    margin-left: 10px;
    img{
      width: 100%;
      height: 100%;
      float: left;
    }
  }
}

.main_bottom{
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: #F0F3F8;
  border-bottom: 3px solid #ECEEF1;
  height: calc(100% - 90px);
  .main_left{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 180px;
    background-color: #FFFFFF;
    border-right:3px solid #ECEEF1;
    .menu_item{
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      font-size: 16px;
      font-weight: 600;
      border-bottom: 1px solid #ECEEF1;
      cursor: pointer;
    }
  }
  .main_right{
    flex: 1;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    .main_content{
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      width: 99%;
      flex: 1;

      background-color: #FFFFFF;
      padding: 5px !important;
      .top_center_title{
        padding-left: 20px;
        width: 140px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
        padding-top: 15px;
      }
      .machine_table{
        display: flex;
        height: calc(100% - 60px);
        /deep/ .el-table .el-table__cell{
          padding: 0px;
          height: 32px;
          // flex-direction: row;
          // align-items: center;
        }
        /deep/ .el-table .cell{
          padding: 0px;
        }
        //   /deep/ .el-table--border{
        //   overflow-y: auto;
        // }
        .table_item{
          display: flex;
          flex-direction: column;
          .table_header{
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 16px;
            color: #2A2A2A;
            background: #EBEFF5;
          }
          .table_title{
            display: flex;
            height: 40px;
            line-height: 40px;
            text-indent: 5px;
            font-size: 14px;
            color:#2A2A2A;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;
            border-bottom: 1px solid #EBEEF5;
            .title_list{
              flex: 1;
            }
          }
          .table_content{
            display: flex;
            border-left: 1px solid #EBEEF5;
            border-right: 1px solid #EBEEF5;
            border-bottom: 1px solid #EBEEF5;
            .content_item{
              line-height: 40px;
              text-align: center;
              font-size: 14px;
              color:#2A2A2A;
              display: flex;
              flex: 1;
              flex-direction: column;
              .item_title{
                height: 40px;
                font-size: 14px;
              }
            }
            .content_main{
              flex: 1;
              display: flex;
              flex-direction: column;
              .main_list{
                display: flex;
                flex-direction: row;
                .list_item{
                  flex: 1;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 40px;
                  .list_bg{
                    width: 40px;
                    height: 20px;
                    border-radius: 10px;
                  }
                  .list_img{
                    width: 12px;
                    height: 6px;
                    margin-left: 15px;
                    display: flex;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                  }
                }
              }
            }
          }
        }
      }
      .main_title{
        width: 100%;
        height: 30px;
        line-height: 30px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
      }
      .main_text{
        height: 50px;
        line-height: 50px;
        font-weight: 600;
        font-size: 16px;
        color: #2A2A2A;
      }
    }
  }
}
</style>
